<template class="firstpage">
    <div>
        <div class="boxMargin">
            <el-card class="box-card">
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-row>
                            <el-col :span="8" class="inputName">属性名称：</el-col>
                            <el-col :span="14">
                                <el-input v-model="searchData.samBrandId" placeholder="请输入属性名称"></el-input>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
                <el-row class="margin">
                    <el-col :span="24" class="right">
                        <el-button type="success" @click="onSearch">查询</el-button>
                        <el-button @click="onReset">清空</el-button>
                    </el-col>
                </el-row>
            </el-card>
        </div>
        <div class="boxMargin">
            <el-card class="box-card">
                <div slot="header">
                    <div class="contion-header" style="width:10%;">
                        <span>Sam分类属性列表</span>
                    </div>
                    <div class="contion-header text-r" style="width:89%;">
                        <el-button type="primary" @click="onBathDelete">新增分类属性</el-button>
                    </div>
                </div>
                <div>
                    <el-table :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column prop="samBrandId" label="ID"></el-table-column>
                        <el-table-column prop="samBrandName" label="属性名称"></el-table-column>
                        <el-table-column prop="jddjBrandId" label="所属属性分组"></el-table-column>
                        <el-table-column prop="jddjBrandName" label="创建时间"></el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button type="text" @click="onDelete(scope.row)">查看</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-card>
        </div>
        <div class="marginTop20 center">
            <template>
                <PAGER ref="wptxPager" @search="onChangePage"></PAGER>
            </template>
        </div>
    </div>
</template>
<script>
import $ from "jquery";
import _validate from "../../../../framework/commonJs/wptx_validate";
import _tools from "../../../../framework/commonJs/wptx_tools";
import _common from "../../../../framework/commonJs/wptx_common";
import _api from "@/framework/API/basedata";
import { PAGER } from "@/framework/commonTemplate/";
let _FUNCTION_NAME = '';
export default {
    components: { PAGER },
    data() {
        return {
            tableData: [],
            searchData: {
            },
            searchDataBuffer: {
            },
            pageData: {
                pageNo: 1,
                pageSize: 10,
                total: 1,
                pageSizes: [10, 20, 50, 100]
            },
            dialogData: {},
            historyData: {},
            infoData: {},
            customData: {
                multipleSelection:[]
            },
            form: {},
            rules: {}
        };
    },
    computed: {},
    watch: {},
    filters: {},
    created() { },
    mounted() {
        this._FUNCTION_NAME = this.$route.name
        this.onInit()
    },
    beforeDestroy() { },
    methods: {
        onInit(data) {
            let self = this;
        },
        onSearch() {
            let self = this;
            let params = self.searchData;
            self.searchDataBuffer = _tools.cloneObj(self.searchData);
            self.$refs.wptxPager.resetPageNo();
            _api.jddjmappingPage(self, self.$refs.wptxPager.pageData, self. callBack_jddjmappingPage, params);

        },
        onChangePage(data) {
            let self = this;
            let params = self.searchDataBuffer;
            _api.jddjmappingPage(self, self.$refs.wptxPager.pageData, self. callBack_jddjmappingPage, params);

        },
        onReset(data) {
            let self = this;
            _tools.reset(self.searchData);
            _tools.reset(self.searchDataBuffer);
            self.onInit();
        },
        onAdd(data) { },
        onDelete(data) {
        },
        onInfo(data) {
            let self = this;
        },
        onUpdate(formName) {
            let self = this;
        },
        onBathDelete() {
            let self = this;
        },
        onBathUpdate() { },
        onDisable(data) {
            let self = this;
        },
        onEnable(data) {
            let self = this;
        },
        onUpload(data) { },
        onBathUpload() { },
        onExport(data) { },
        onDownload(data) { },
        onHistory(data) { },
        callBack_jddjmappingPage(data) {
            let self = this;
            if (_validate.checkEmpty(data)) {
                _validate.openTip(self, "返回数据为空", "warning");
            } else {
                self.tableData = data.result;
                self.$refs.wptxPager.updatePageData(data);
            }
        },
        handleSelectionChange(val){
            this.customData.multipleSelection = val;
        }
    }
};
</script>
<style scoped>
.contion-header {
    display: inline-block;
    box-sizing: border-box;
}
.text-r {
    text-align: right;
}
</style>
